
<template>
  <div class="jeepay-m-center" style="margin-top: 5px; margin-left: 20px;">
    <a-steps v-show="(vdata.showStyle == showStyleEnum.step) && !isMobile" :current="vdata.currentStep - 1" type="navigation">
      <a-step title="主体信息" />
      <a-step title="经营信息" />
      <a-step title="结算规则" />
      <a-step title="结算账户" />
      <a-step title="超级管理员" />
    </a-steps>
    <a-divider v-show="!isMobile" />
    <a-divider v-show="isMobile" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;"><span style="color: #2980FD;">{{ vdata.currentStep }}</span>/{{ vdata.steps.length }} {{ vdata.steps[vdata.currentStep - 1] }}</a-divider>
    <!-- 1. 主体信息  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 1"
      ref="stepForm1Ref"
      style="margin-top: 20px;"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step1Rules"
    >
      <a-form-item label="选择商户类型" name="merchantType">
        <a-radio-group v-model:value="applymentDetailInfo.merchantType" :disabled="isView" @change="changeMerchantType">
          <a-radio :value="2">个体工商户</a-radio>
          <a-radio :value="3">企业</a-radio>
          <!-- <a-radio :value="4">党政、机关及事业单位</a-radio>
          <a-radio :value="5">其他组织</a-radio> -->
        </a-radio-group>
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">营业执照</a-divider>

      <a-form-item label="营业执照照片" name="licenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.licenseImg" bizType="applyment" ocrType="license" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 营业执照编号)</span>
      </a-form-item>

      <a-form-item label="营业执照编号" name="licenseNo">
        <a-input v-model:value.trim="applymentDetailInfo.licenseNo" :readonly="isView" />
      </a-form-item>

      <a-form-item label="商户名称全称" name="mchFullName">
        <a-input v-model:value.trim="applymentDetailInfo.mchFullName" :readonly="isView" />
      </a-form-item>

      <a-form-item label="营业执照注册地址" name="licenseAddress">
        <a-input v-model:value.trim="applymentDetailInfo.licenseAddress" :readonly="isView" />
      </a-form-item>

      <a-form-item label="营业执照有效期开始日期" name="licenseEffectBegin">
        <a-input v-model:value.trim="applymentDetailInfo.licenseEffectBegin" style="margin-right: 10px;" :readonly="isView" />
      </a-form-item>

      <a-form-item class="jeepay-valid" label="营业执照有效期截止日期" name="licenseEffectEnd">
        <a-input v-model:value.trim="applymentDetailInfo.licenseEffectEnd" :disabled="applymentDetailInfo.licenseEffectEnd == '长期'" :readonly="isView" style="width: 150px;margin-right: 10px;" />
        <a-checkbox :checked="applymentDetailInfo.licenseEffectEnd == '长期' " @change="(e: any) => applymentDetailInfo.licenseEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">法定代表人证件</a-divider>

      <a-form-item label="法人身份证人像面照片" name="idcard1Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
      </a-form-item>

      <a-form-item label="法人身份证国徽面照片" name="idcard2Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
      </a-form-item>

      <a-form-item label="法人身份证姓名" name="idcardName">
        <a-input v-model:value.trim="applymentDetailInfo.idcardName" :readonly="isView" />
      </a-form-item>

      <a-form-item label="法人身份证号" name="idcardNo">
        <a-input v-model:value.trim="applymentDetailInfo.idcardNo" :readonly="isView" />
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType == 3" label="法人身份证居住地址" name="idcardAddress">
        <a-input v-model:value.trim="applymentDetailInfo.idcardAddress" :readonly="isView" />
      </a-form-item>

      <a-form-item label="法人身份证起始有效期" name="idcardEffectBegin">
        <a-input v-model:value.trim="applymentDetailInfo.idcardEffectBegin" :readonly="isView" />
      </a-form-item>

      <a-form-item class="jeepay-valid" label="法人身份证结束有效期" name="idcardEffectEnd">
        <a-input v-model:value.trim="applymentDetailInfo.idcardEffectEnd" :disabled="applymentDetailInfo.idcardEffectEnd == '长期'" :readonly="isView" style="width: 150px;margin-right: 10px;" />
        <a-checkbox :checked="applymentDetailInfo.idcardEffectEnd == '长期' " @change="(e) => applymentDetailInfo.idcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType == 3" label="经营者/法人是否为受益人" name="owner">
        <a-radio-group v-model:value="applymentDetailInfo.owner" :disabled="isView">
          <a-radio :value="true">是</a-radio>
          <a-radio :value="false">不是</a-radio>
        </a-radio-group>
      </a-form-item>

      <template v-if="applymentDetailInfo.merchantType == 3">
        <a-button class="jeepay-m-btn" data-type="text" style="margin-left:35px" size="small" type="primary" @click="addCompanyBeneficiaryListFunc"><plus-outlined />新增企业受益人卡片</a-button>
      </template>

      <template v-if="applymentDetailInfo.merchantType == 3 && applymentDetailInfo.companyBeneficiaryList">
        <a-card class="jeepay-card-wx" v-for="(item, i) in applymentDetailInfo.companyBeneficiaryList" :key="i" style="margin:35px;">
          <template #title>
            <div style="display:flex;justify-content: space-between;">
              <span>企业受益人信息[{{ i+1 }}]</span>
              <div>
                <!-- <a-button style="margin-right:20px" size="small" type="primary" @click="useBizCompanyBeneficiaryFunc(i)"><partition-outlined />设置法人为受益人</a-button> -->
                <template v-if="(!applymentDetailInfo.owner && applymentDetailInfo.companyBeneficiaryList.length > 1) || applymentDetailInfo.owner">
                  <a-button class="jeepay-m-btn" data-type="text" size="small" type="danger" @click="delCompanyBeneficiaryListFunc(i)"><delete-outlined />删除该企业受益人卡片</a-button>
                </template>
              </div>
            </div>
          </template>


          <div style="padding-top:20px">
            <a-form-item label="受益人身份证人像面照片" :name="`companyBeneficiaryListIdcard1Img_${i}`">
              <JeepayUpload v-model:src="item.idcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="(o) => ocrScanFuncByCompanyBeneficiary(o, i)" />
              <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
            </a-form-item>

            <a-form-item label="受益人身份证国徽面照片" :name="`companyBeneficiaryListIdcard2Img_${i}`">
              <JeepayUpload v-model:src="item.idcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="(o) => ocrScanFuncByCompanyBeneficiary(o, i)" />
              <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
            </a-form-item>

            <a-form-item label="受益人身份证姓名" :name="`companyBeneficiaryListIdcardName_${i}`">
              <a-input v-model:value.trim="item.idcardName" :readonly="isView" />
            </a-form-item>

            <a-form-item label="受益人身份证号" :name="`companyBeneficiaryListIdcardNo_${i}`">
              <a-input v-model:value.trim="item.idcardNo" :readonly="isView" />
            </a-form-item>

            <a-form-item label="受益人身份证起始有效期" :name="`companyBeneficiaryListIdcardEffectBegin_${i}`">
              <a-input v-model:value.trim="item.idcardEffectBegin" :readonly="isView" />
            </a-form-item>

            <a-form-item class="jeepay-valid" label="受益人身份证结束有效期" :name="`companyBeneficiaryListIdcardEffectEnd_${i}`">
              <a-input v-model:value.trim="item.idcardEffectEnd" :readonly="isView" :disabled="item.idcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
              <a-checkbox :disabled="isView" :checked="item.idcardEffectEnd == '长期' " @change="(e : any) => item.idcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
            </a-form-item>

            <a-form-item label="受益人身份证居住地址" :name="`companyBeneficiaryListIdcardAddress_${i}`">
              <a-input v-model:value.trim="item.idcardAddress" :readonly="isView" />
            </a-form-item>
          </div>
        </a-card>
      </template>
    </a-form>

    <!-- 2. 经营信息  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 2"
      ref="stepForm2Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step2Rules"
    >
      <a-form-item label="商户简称" name="mchShortName">
        <a-input v-model:value.trim="applymentDetailInfo.mchShortName" :readonly="isView" />
        <span class="jeepay-tip-text">在支付完成页向买家展示</span>
      </a-form-item>

      <a-form-item label="客服电话" name="servicePhone">
        <a-input v-model:value.trim="applymentDetailInfo.servicePhone" :readonly="isView" />
        <span class="jeepay-tip-text">请填写真实有效的客服电话，将在交易记录中向买家展示</span>
      </a-form-item>

      <a-form-item label="门店名称" name="storeName">
        <a-input v-model:value.trim="applymentDetailInfo.storeName" :readonly="isView" />
      </a-form-item>

      <a-form-item label="门店地理位置选择省市县" name="areaCode">
        <JeepayAreaSelect v-model:value="applymentDetailInfo.areaCode" />
      </a-form-item>

      <a-form-item label="门店详细地址" name="address">
        <a-input v-model:value.trim="applymentDetailInfo.address" :readonly="isView" />
      </a-form-item>

      <a-form-item label="门头照" name="storeOuterImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeOuterImg" bizType="applyment" />
      </a-form-item>

      <a-form-item label="店内环境照" name="storeInnerImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeInnerImg" bizType="applyment" />
      </a-form-item>
    </a-form>

    <!-- 3. 结算规则  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 3"
      ref="stepForm3Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step3Rules"
    >
      <a-form-item label="结算规则信息" name="settlementId">
        <a-select v-model:value="applymentDetailInfo.settlementId" :disabled="isView" placeholder="选择结算规则" @change="changeSettlementIdFunc">
          <template v-for="item in vdata.settlementList" :key="item.settlementId">
            <a-select-option :value="item.settlementId">
              <div style="display: flex;justify-content: space-between;word-break: break-all;">
                <span class="option-left">{{ item.settlementName }}</span>
                <span class="option-right">{{ item.settRule }}</span>
              </div>
            </a-select-option>
          </template>
        </a-select>
        <div class="jeepay-tip-text">请根据实际经营行业选择结算规则</div>
      </a-form-item>

      <a-form-item label="选择行业" name="mccCode">
        <a-select v-model:value="applymentDetailInfo.mccCode" :disabled="isView" placeholder="选择行业编码" @change="changeQualificationFunc">
          <template v-for="item in vdata.qualificationOptions" :key="item.qualificationId">
            <a-select-option :value="item.qualificationId">
              <div style="display: flex;flex-direction: column;word-break: break-all;">
                <span class="option-top">{{ item.qualificationType }}</span>
                <span class="option-bottom">{{ item.qualifications }}</span>
              </div>
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>

      <a-form-item v-if="vdata.qualificationDesc != '无需特殊资质'" label="特殊资质" :required="applymentDetailInfo.isNeedQualification">
        <JeepayUpload v-model:src="applymentDetailInfo.qualifications" bizType="applyment" />
        <div class="jeepay-tip-text">{{ vdata.qualificationDesc }}</div>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.isInActivities" label="优惠费率活动">
        <a-select v-model:value="applymentDetailInfo.activitiesId" placeholder="选择优惠费率活动" @change="changeActivitiesFunc">
          <a-select-option value="">不参与活动</a-select-option>
          <a-select-option value="20191030111cff5b5e">泛行业活动【优惠区间 0.2%~0.6%】</a-select-option>
        </a-select>
      </a-form-item>

      <div v-if="applymentDetailInfo.isInActivities && applymentDetailInfo.activitiesId" label="配置费率" name="fee" style="width:100%;">
        <JeepayPaywayRatePanel 
          ref="jeepayPaywayRatePanelRef" 
          :configMode="configMode"
          :infoId=" (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo" 
          :selectIfCode="mchApplymentData.ifCode" 
          onlyRate="true"
        />
      </div>
    </a-form>

    <!-- 4. 结算账户  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 4"
      ref="stepForm4Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step4Rules"
    >
      <a-form-item label="账户类型" name="settAccountType" :disabled="isView">
        <a-radio-group v-model:value="applymentDetailInfo.settAccountType" @change="changeSettAccountTypeFunc">
          <a-radio v-if="applymentDetailInfo.merchantType == 2" value="C">对私</a-radio>
          <a-radio value="B">对公</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="开户名称" name="settAccountName">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName" :readonly="isView" />
      </a-form-item>

      <a-form-item label="银行账号" name="settAccountNo">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountNo" :readonly="isView" />
      </a-form-item>

      <a-form-item label="开户行" name="settAccountBankName">
        <a-select v-model:value="applymentDetailInfo.settAccountBankName" :options="bankList" placeholder="请选择开户行" @change="changeSettAccountBankNameFunc" />
      </a-form-item>

      <a-form-item label="开户行分支行所在地区" name="settAccountBankBranchAreaCode">
        <JeepayAreaSelect v-model:value="applymentDetailInfo.settAccountBankBranchAreaCode" />
      </a-form-item>

      <a-form-item v-if="!applymentDetailInfo.settAccountBankName || applymentDetailInfo.settAccountBankName == '其他银行'" label="开户支行名称" name="settAccountBankBranchName">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountBankBranchName" placeholder="开户支行名称" :readonly="isView" />
        <span><a href="https://pay.weixin.qq.com/wiki/doc/apiv3_partner/terms_definition/chapter1_1_3.shtml#part-4" target="_blank">开户支行名称参考</a></span>
      </a-form-item>
    </a-form>

    <!-- 5. 超级管理员  -->
    <a-form
      v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 5"
      ref="stepForm5Ref"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 10 }"
      :rules="vdata.step5Rules"
    >
      <a-form-item label="超管类型" name="contactType">
        <a-radio-group v-model:value="applymentDetailInfo.contactType" :disabled="isView">
          <a-radio value="LEGAL">经营者/法人</a-radio>
          <a-radio value="SUPER">经办人</a-radio>
        </a-radio-group>
        <div class="jeepay-tip-text">超级管理员将接收开户信息及完成签约，并可进行商户号的日常重要管理和资金操作</div>
      </a-form-item>

      <template v-if="applymentDetailInfo.contactType == 'SUPER'">
        <a-form-item label="超管身份证人像面照片" name="contactIdDocCopy">
          <JeepayUpload v-model:src="applymentDetailInfo.contactIdDocCopy" bizType="applyment" ocrType="idCard" @ocrScan="contactOcrScanFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
        </a-form-item>

        <a-form-item label="超管身份证国徽面照片" name="contactIdDocCopyBack">
          <JeepayUpload v-model:src="applymentDetailInfo.contactIdDocCopyBack" bizType="applyment" ocrType="idCard" @ocrScan="contactOcrScanFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
        </a-form-item>

        <a-form-item label="超管身份证姓名" name="contactName">
          <a-input v-model:value.trim="applymentDetailInfo.contactName" :readonly="isView" />
        </a-form-item>

        <a-form-item label="超管身份证号" name="contactIdNumber">
          <a-input v-model:value.trim="applymentDetailInfo.contactIdNumber" :readonly="isView" />
        </a-form-item>
      
        <a-form-item label="超管身份证起始有效期" name="contactIdDocPeriodBegin">
          <a-input v-model:value.trim="applymentDetailInfo.contactIdDocPeriodBegin" style="width: 150px;margin-right: 10px;" :readonly="isView" />
        </a-form-item>

        <a-form-item class="jeepay-valid" label="超管身份证结束有效期" name="contactIdDocPeriodEnd">
          <a-input v-model:value.trim="applymentDetailInfo.contactIdDocPeriodEnd" :disabled="applymentDetailInfo.contactIdDocPeriodEnd == '长期'" style="width: 150px;margin-right: 10px;" />
          <a-checkbox :checked="applymentDetailInfo.contactIdDocPeriodEnd == '长期' " @change="(e) => applymentDetailInfo.contactIdDocPeriodEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
        </a-form-item>

        <a-form-item label="业务办理授权函" name="businessAuthorizationLetter">
          <JeepayUpload v-model:src="applymentDetailInfo.businessAuthorizationLetter" bizType="applyment" />
          <span class="jeepay-tip-text">参考：<a href="https://kf.qq.com/faq/220509Y3Yvym220509fQvYR7.html" target="_blank">授权函模板</a></span>
        </a-form-item>
      </template>

      <a-form-item label="手机号" name="contactPhone">
        <a-input v-model:value.trim="applymentDetailInfo.contactPhone" :readonly="isView" />
        <span class="jeepay-tip-text">用于接收微信支付的日常重要管理信息及日常操作验证码</span>
      </a-form-item>
      <a-form-item label="邮箱" name="contactEmail">
        <a-input v-model:value.trim="applymentDetailInfo.contactEmail" :readonly="isView" />
        <span class="jeepay-tip-text">用于接收微信支付的开户邮件及日常业务通知</span>
      </a-form-item>
    </a-form>

    <a-divider />

    <div class="jeepay-btn-box jeepay-m-btn-box" style="margin-top: 50px; margin-bottom: 50px;text-align: center;">
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep > 1" class="jeepay-m-btn" data-type="inline" type="primary" @click="toPrevStep"><left-circle-outlined /> 上一步 </a-button>
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep < 5" class="jeepay-m-btn" data-type="inline" type="primary" @click="toNextStep">下一步 <right-circle-outlined /> </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import {reactive, getCurrentInstance, defineEmits, inject, ref} from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'
import mccWxList from './wxMcc.json'

const jeepayPaywayRatePanelRef = ref()

const bankList = [ {value: '工商银行'}, {value: '交通银行'}, {value: '招商银行'}, {value: '民生银行'}, {value: '中信银行'}, {value: '浦发银行'}, {value: '兴业银行'}, {value: '光大银行'}, 
  {value: '广发银行'}, {value: '平安银行'}, {value: '北京银行'}, {value: '华夏银行'}, {value: '农业银行'}, {value: '建设银行'}, {value: '邮政储蓄银行'}, {value: '中国银行'}, {value: '宁波银行'}, {value: '其他银行'}  ]

// 获取当前实例的代理对象
const { proxy } : any = getCurrentInstance()

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties


// 显示类型枚举值
const showStyleEnum = {
  step: 'step',
  block: 'block'
}

// emit： 向父组件进行通讯。 
const emit = defineEmits(['itemRender'])


// 响应式数据
const vdata : any = reactive({
  showStyle: 'step', // 显示类型： step-分步,  block-整页显示 
  steps: ['主体信息', '经营信息', '结算规则', '结算账户', '超级管理员'],
  isTempData: false, // 是否保存草稿
  isvDefaultPaywayFee: {} as any, // 服务商默认费率
  currentStep: 1,
  step1Rules: {
                merchantType: [ ruleGenerator.requiredSelect('商户类型', 'number') ],
                licenseImg: [ ruleGenerator.requiredUpload('营业执照图片') ],
                licenseNo: [ ruleGenerator.requiredInput('营业执照编号') ],
                licenseAddress: [ ruleGenerator.requiredInput('营业执照注册地址') ],
                licenseEffectBegin: [ ruleGenerator.requiredInput('营业执照有效期开始日期') ],
                licenseEffectEnd: [ ruleGenerator.requiredInput('营业执照有效期结束日期') ],
                mchFullName: [ ruleGenerator.requiredInput('商户名称全称') ],
                idcard1Img: [ ruleGenerator.requiredUpload('法人身份证人像面照片') ],
                idcardName: [ ruleGenerator.requiredInput('身份证中的姓名') ],
                idcardNo: [ ruleGenerator.requiredInput('身份证号') ],
                idcardAddress: [ ruleGenerator.requiredInput('身份证居住地址') ],
                idcard2Img: [ ruleGenerator.requiredUpload('法人身份证国徽面照片') ],
                idcardEffectBegin: [ ruleGenerator.requiredInput('身份证起始有效期'), ruleGenerator.date ],
                idcardEffectEnd: [ ruleGenerator.requiredInput('身份证有效期截止日期'), ruleGenerator.dateOrForever ],

                owner: [ ruleGenerator.requiredSelect('经营者/法人是否为受益人', 'boolean') ],

                companyBeneficiaryListIdcardName_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcardName', '请输入身份证中的姓名') } ],
                companyBeneficiaryListIdcardNo_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcardNo', '请输入身份证号') } ],
                companyBeneficiaryListIdcardEffectBegin_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcardEffectBegin', '请输入身份证起始有效期') } ],
                companyBeneficiaryListIdcardEffectEnd_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcardEffectEnd', '请输入身份证有效期截止日期') } ],
                companyBeneficiaryListIdcardAddress_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcardAddress', '请输入身份证居住地址') } ],
                companyBeneficiaryListIdcard1Img_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcard1Img', '请上传人像照') } ],
                companyBeneficiaryListIdcard2Img_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcard2Img', '请上传国徽面照') } ],

                companyBeneficiaryListIdcardName_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcardName', '请输入身份证中的姓名') } ],
                companyBeneficiaryListIdcardNo_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcardNo', '请输入身份证号') } ],
                companyBeneficiaryListIdcardEffectBegin_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcardEffectBegin', '请输入身份证起始有效期') } ],
                companyBeneficiaryListIdcardEffectEnd_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcardEffectEnd', '请输入身份证有效期截止日期') } ],
                companyBeneficiaryListIdcardAddress_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcardAddress', '请输入身份证居住地址') } ],
                companyBeneficiaryListIdcard1Img_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcard1Img', '请上传人像照') } ],
                companyBeneficiaryListIdcard2Img_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcard2Img', '请上传国徽面照') } ],

                companyBeneficiaryListIdcardName_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcardName', '请输入身份证中的姓名') } ],
                companyBeneficiaryListIdcardNo_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcardNo', '请输入身份证号') } ],
                companyBeneficiaryListIdcardEffectBegin_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcardEffectBegin', '请输入身份证起始有效期') } ],
                companyBeneficiaryListIdcardEffectEnd_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcardEffectEnd', '请输入身份证有效期截止日期') } ],
                companyBeneficiaryListIdcardAddress_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcardAddress', '请输入身份证居住地址') } ],
                companyBeneficiaryListIdcard1Img_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcard1Img', '请上传人像照') } ],
                companyBeneficiaryListIdcard2Img_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcard2Img', '请上传国徽面照') } ],

                companyBeneficiaryListIdcardName_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcardName', '请输入身份证中的姓名') } ],
                companyBeneficiaryListIdcardNo_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcardNo', '请输入身份证号') } ],
                companyBeneficiaryListIdcardEffectBegin_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcardEffectBegin', '请输入身份证起始有效期') } ],
                companyBeneficiaryListIdcardEffectEnd_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcardEffectEnd', '请输入身份证有效期截止日期') } ],
                companyBeneficiaryListIdcardAddress_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcardAddress', '请输入身份证居住地址') } ],
                companyBeneficiaryListIdcard1Img_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcard1Img', '请上传人像照') } ],
                companyBeneficiaryListIdcard2Img_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcard2Img', '请上传国徽面照') } ],
              },
  step2Rules: {
                mchShortName: [ ruleGenerator.requiredInput('商户简称') ],
                servicePhone: [ ruleGenerator.requiredInput('客服电话') ],
                storeName: [ ruleGenerator.requiredInput('门店名称') ],
                areaCode: [ ruleGenerator.requiredSelect('位置编码', 'array') ],
                address: [ ruleGenerator.requiredInput('详细地址') ],
                storeInnerImg: [ ruleGenerator.requiredUpload('门头照') ],
                storeOuterImg: [ ruleGenerator.requiredUpload('店内环境照') ],
  },
  step3Rules: {
                settlementId: [ ruleGenerator.requiredSelect('结算规则') ],
                mccCode: [ ruleGenerator.requiredSelect('行业') ],
  },
  step4Rules: {
                settAccountType: [ ruleGenerator.requiredSelect('账户类型') ],
                settAccountNo: [ ruleGenerator.requiredInput('银行帐号') ],
                settAccountName: [ ruleGenerator.requiredInput('开户名称') ],
                settAccountBankName: [ ruleGenerator.requiredInput('开户行') ],
  },
  step5Rules: {
              contactType: [ ruleGenerator.requiredSelect('超管身份') ],
              contactIdDocCopy: [ ruleGenerator.requiredUpload('超管身份证人像面照片') ],
              contactIdDocCopyBack: [ ruleGenerator.requiredUpload('超管身份证国徽面照片') ],
              contactName: [ ruleGenerator.requiredInput('超管姓名') ],
              contactIdNumber: [ ruleGenerator.requiredInput('超管身份证号码') ],
              contactIdDocPeriodBegin: [ ruleGenerator.requiredInput('超管身份证起始有效期'), ruleGenerator.date ],
              contactIdDocPeriodEnd: [ ruleGenerator.requiredInput('超管身份证结束有效期'), ruleGenerator.dateOrForever ],
              businessAuthorizationLetter: [ ruleGenerator.requiredUpload('业务办理授权函') ],
              contactPhone: [ ruleGenerator.requiredInput('手机号'), ruleGenerator.mobile ],
              contactEmail: [ ruleGenerator.requiredInput('邮箱') ]
  }
  
})

// 接收进件参数（包含 商户号， ifCode ）
let mchApplymentDataRef : any = inject('mchApplymentData')
let mchApplymentData : any = mchApplymentDataRef.value

// 接收父组件的进件详细参数
let applymentDetailInfoInject : any = inject('applymentDetailInfo')
let applymentDetailInfo : any = applymentDetailInfoInject.value

// 注入： 是否预览模式
let isView : any = inject('isView')

// 参数注入： 是否手机端
let isMobile : any = inject('isMobile')

// 参数注入： 配置方式
let configMode : any = inject('configMode')


// 将填写的费率合成符合保存格式的数据，如："[{\"wayCode\":\"WX_APP\",\"feeType\":\"SINGLE\",\"feeRate\":0.005}]"
function convertPaywayFeeList() {
  if (vdata.currentStep !== 3) {
    return
  }

  if (!applymentDetailInfo.activitiesId) {
    applymentDetailInfo.paywayFeeList = []
    return
  }

}


// 下一步
function toNextStep() {
  // 验证是否通过
  proxy.$refs['stepForm'+vdata.currentStep+'Ref'].validate().then( () => {
      // 处理费率
      convertPaywayFeeList()
      vdata.currentStep ++
  })
}

// 上一步
function toPrevStep(){
  vdata.currentStep --
}

function validateAllForm(step: number){
  return proxy.$refs['stepForm'+step+'Ref'].validate().then( () => {
     if(step >= 5){
      return Promise.resolve()
     }
     return validateAllForm(++step)
     
  })
}

// 图片识别的回调函数
function ocrScanFunc(orcObject: any){
  if(orcObject){
    Object.assign(applymentDetailInfo, orcObject)
  }
}

// 超管身份证识别的回调函数
function contactOcrScanFunc(orcObject: any){
  if(orcObject.idcardName) {
    applymentDetailInfo.contactName = orcObject.idcardName
  }
  if(orcObject.idcardNo) {
    applymentDetailInfo.contactIdNumber = orcObject.idcardNo
  }
  if(orcObject.idcardEffectBegin) {
    applymentDetailInfo.contactIdDocPeriodBegin = orcObject.idcardEffectBegin
  }
  if(orcObject.idcardEffectEnd) {
    applymentDetailInfo.contactIdDocPeriodEnd = orcObject.idcardEffectEnd
  }
}

// 初始化结算规则、行业信息
initMcc()
function initMcc() {
  if (!applymentDetailInfo.merchantType) {
    return
  }

  // 根据商户类型：  个体户/企业 确定结算规则List
  getSettlementList()

  const settlementId = applymentDetailInfo.settlementId
  const qualificationId = applymentDetailInfo.qualificationId
  const activitiesId = applymentDetailInfo.activitiesId

  // 处理结算规则信息
  if (settlementId) {
    changeSettlementIdFunc(settlementId)
  }

  // 处理行业信息
  if (qualificationId) {
    changeQualificationFunc(qualificationId)
  }

  // 处理费率活动信息
  if (activitiesId) {
    changeActivitiesFunc(activitiesId)
  }
}

// 主体类型选中事件
function changeMerchantType() {
  // 清空结算规则
  applymentDetailInfo.settlementId = ''
  getSettlementList()

  if(applymentDetailInfo.merchantType == '3'){ // 企业

      // 企业类型必传 受益人
      if(!applymentDetailInfo.companyBeneficiaryList || applymentDetailInfo.companyBeneficiaryList.length == 0){
        applymentDetailInfo.companyBeneficiaryList = [{}]
      }
  }
}

  // 根据商户类型：  个体户/企业 确定结算规则List
function getSettlementList() {
  vdata.settlementList = []
    
  if (applymentDetailInfo.merchantType == 2){
      vdata.settlementList = mccWxList.individual
  }else if (applymentDetailInfo.merchantType == 3){
      vdata.settlementList = mccWxList.enterprise
  }
}


// 结算规则选中事件
function changeSettlementIdFunc(e: any) {
  const selectItem = vdata.settlementList.find( item => item.settlementId == e)
  if (!selectItem) {
    // 清空结算规则
    applymentDetailInfo.settlementId = ''
    return
  }

  vdata.qualificationOptions = selectItem.qualification

  // 结算规则变化，重置行业/特殊资质信息
  applymentDetailInfo.settlementId = e
  applymentDetailInfo.mccCode = ''
  applymentDetailInfo.qualificationId = ''
  applymentDetailInfo.isNeedQualification = ''

  // 重置费率信息
  applymentDetailInfo.isInActivities = selectItem.isInActivities  // 是否可参与优惠费率活动
  if (!selectItem.isInActivities) {
    applymentDetailInfo.activitiesId = ''
    applymentDetailInfo.paywayFeeList = []
  } else {
    applymentDetailInfo.activitiesId = '20191030111cff5b5e'
  }
}

// 行业特殊资质选择事件
function changeQualificationFunc(e){

  if (!vdata.qualificationOptions) {
    return
  }

  const selectItem = vdata.qualificationOptions.find(item => item.qualificationId == e)
  if (!selectItem) {
    return
  }

  applymentDetailInfo.mccCode = selectItem.qualificationType
  applymentDetailInfo.qualificationId = selectItem.qualificationId
  applymentDetailInfo.isNeedQualification = selectItem.isNeedQualification

  vdata.qualificationDesc = selectItem.qualifications
}

// 是否参与优惠活动选择事件
function changeActivitiesFunc(e: any){
  if (e != '20191030111cff5b5e') {
    applymentDetailInfo.paywayFeeList = []
  }
}

// 更换账户类型
function changeSettAccountTypeFunc() {
  if (applymentDetailInfo.settAccountType == 'C') {
    applymentDetailInfo.settAccountName = applymentDetailInfo.idcardName
  }else {
    applymentDetailInfo.settAccountName = applymentDetailInfo.mchFullName
  }
}

// 开户行选择事件
function changeSettAccountBankNameFunc(e) {
  if (e != '其他银行') {
    applymentDetailInfo.settAccountBankBranchName = ''
  }
}

// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isTemp){

  if(jeepayPaywayRatePanelRef.value && jeepayPaywayRatePanelRef.value){
    // 放置费率配置项
    let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
    if(typeof(paywayFeeList) != 'object'){
        return Promise.reject()
    }
    // 赋值到对象中
    applymentDetailInfo.paywayFeeList = paywayFeeList
  }else{
    applymentDetailInfo.paywayFeeList = []
  }


  // 处理费率
  convertPaywayFeeList()

  // 保存草稿只校验当前步骤数据
  if (isTemp) {
    return Promise.resolve()
  }

  // 验证所有表单
  return validateAllForm(1).then(() => {
    return Promise.resolve()
  }).catch((params: any) => {
    $infoBox.message.error('数据填写不完整， 请检查后提交')
    return Promise.reject()
  })
}


// 新增受益人
function addCompanyBeneficiaryListFunc(){
  
  if(!applymentDetailInfo.companyBeneficiaryList){
    applymentDetailInfo.companyBeneficiaryList = [{}]
  }else{

    if(applymentDetailInfo.owner && applymentDetailInfo.companyBeneficiaryList.length >= 3){
      return $infoBox.message.error('最多新增三个企业受益人！')
    } else if(!applymentDetailInfo.owner && applymentDetailInfo.companyBeneficiaryList.length >= 4){
      return $infoBox.message.error('最多新增四个企业受益人！')
    }

    applymentDetailInfo.companyBeneficiaryList.push({})
  }
  
}

// 删除受益人
function delCompanyBeneficiaryListFunc(i){
  applymentDetailInfo.companyBeneficiaryList.splice(i, 1)
}


// 图片识别的回调函数
function ocrScanFuncByCompanyBeneficiary(orcObject, i){

  if(orcObject){
    Object.assign(applymentDetailInfo.companyBeneficiaryList[i], orcObject)
  }

}


// 图片识别的回调函数
function ocrScanFuncByContact(orcObject){

  if(orcObject){
    orcObject.idcardNo && (applymentDetailInfo.contactIdcardNo = orcObject.idcardNo)
    orcObject.idcardAddress && (applymentDetailInfo.contactIdcardAddress = orcObject.idcardAddress)
    orcObject.idcardEffectBegin && (applymentDetailInfo.contactIdcardEffectBegin = orcObject.idcardEffectBegin)
    orcObject.idcardEffectEnd && (applymentDetailInfo.contactIdcardEffectEnd = orcObject.idcardEffectEnd)
  }

}


// 使用法人信息
function useBizCompanyBeneficiaryFunc(i){
  applymentDetailInfo.companyBeneficiaryList[i].idcardName = applymentDetailInfo.idcardName
  applymentDetailInfo.companyBeneficiaryList[i].idcardNo = applymentDetailInfo.idcardNo
  applymentDetailInfo.companyBeneficiaryList[i].idcard1Img = applymentDetailInfo.idcard1Img
  applymentDetailInfo.companyBeneficiaryList[i].idcard2Img = applymentDetailInfo.idcard2Img
  applymentDetailInfo.companyBeneficiaryList[i].idcardAddress = applymentDetailInfo.idcardAddress
  applymentDetailInfo.companyBeneficiaryList[i].idcardEffectBegin = applymentDetailInfo.idcardEffectBegin
  applymentDetailInfo.companyBeneficiaryList[i].idcardEffectEnd = applymentDetailInfo.idcardEffectEnd
}


// 自定义校验规则
function companyBeneficiaryRulesFunc(index, field, msg){

  // 不存在时不校验
  if(!applymentDetailInfo.companyBeneficiaryList || applymentDetailInfo.companyBeneficiaryList.length < 0){
    return Promise.resolve()
  }

  if(!applymentDetailInfo.companyBeneficiaryList[index][field]){
    return Promise.reject(msg)
  }

  return Promise.resolve()
}


defineExpose({ saveDataPreCallback })

</script>

<style lang="less" scoped>
.jeepay-tip-text{
  font-size: 10px; color: rebeccapurple
}
.option-left {
  width: 50%;
  word-wrap: break-word; 
  white-space: normal;
  word-break: break-all;
}
.option-right {
  color: rgb(153, 153, 153);
}
.option-bottom {
  word-wrap: break-word; 
  white-space: normal;
  word-break: break-all;
  color: rgb(153, 153, 153);
}
.jeepay-btn-box {
  margin: 15px -12px !important;
}
.jeepay-btn-box .ant-btn {
  margin: 0 10px;
}
</style>